<template>
  <div>
    <el-button type="primary" plain size="small">年订单数量统计</el-button>
    <el-button type="primary" plain size="small">周订单数量统计</el-button>
    <el-button type="primary" plain size="small">日订单数量统计</el-button>&emsp;&emsp;&emsp;&emsp;&emsp;
    <el-button type="success" plain size="small">年新增用户统计</el-button>
    <el-button type="success" plain  @click="week" size="small">周新增用户统计</el-button>
    <el-button type="success" plain size="small">日新增用户统计</el-button>
    <el-button type="danger" plain>年热门菜品</el-button>
    <el-button type="danger" plain>周热门菜品</el-button>
    <el-button type="danger" plain>日热门菜品</el-button>
    <div class="echart" id="mychart" :style="myChartStyle"></div>
  </div>

</template>

<script>
import * as echarts from "echarts";
export default {
  data(){
    return{
      xData: ["10号", "11号", "12号", "13号", "14号", "15号", "16号"], //横坐标
      yData: [10, 0, 50, 25, 120, 28, 200], //数据
      myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
    }
  },
  methods:{
    initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.xData
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData,
            label: {
              show:true,
              position: "top"
            },
            color:"blue",
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    //周新增用户统计
    week(){
      this.initEcharts();
    },
  },
  mounted() {

  }
}
</script>

<style>

</style>
